<template>
	<!--start 头部-->
	<header class="header">
		<!--start 头部通栏-->
		<nav class="header-nav clearfix">
			<!--start LOGO-->
			<transition name="fade">
				<div v-show="headerFoldBtn" class="header-logo fl">
					<router-link to="/index">
						<img v-if="$store.state.headerLogo" :src="$store.state.headerLogo" width="auto" alt="一元办公网" class="fr" />
						<img src="../../assets/img/logo1.png" width="auto" alt="一元办公网" class="fr" v-else/>
					</router-link>
				</div>
			</transition>
			<!--end LOGO-->
			<!--start 折叠按钮-->
			<div :class="{close:headerFoldBtn}" class="header-fold-btn fl">
				<i @click="headFoldBtn" class="iconfont">&#xe647;</i>
			</div>
			<!--end 折叠按钮-->
			<!--start 右边按钮-->
			<div class="header-fn-btn fr">
				<ul>

					<li @click="queryPortalDocListListAll()" class="fr" data-status='open'>
						<div>
							<i class="iconfont">&#xe661;</i>
							<span class="header-message-num" v-if="'0'!=this.$store.state.notReadSumCount">{{this.$store.state.notReadSumCount}}</span>
						</div>
					</li>
					<li class="fr setting-parent">
						<div>
							<i class="iconfont">&#xe600;</i>
						</div>
						<ul class="setting">
							<li class="setting-item">
								<a @click="jichuData = !jichuData" href="javascript:void(0)" class="setting-itemA">
									<i class="iconfont">&#xe61a;</i>
									<span>基础资料</span>
									<i :class="{open:jichuData}" class="iconfont setting-icon-btn">&#xe634;</i>
								</a>
								<ul v-show="jichuData">
									<li>
										<router-link to="/set/companyMsg">
											<i class="iconfont">&nbsp;</i>
											<span>公司信息</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/departmentStaff">
											<i class="iconfont">&nbsp;</i>
											<span>部门与员工</span>
										</router-link>
									</li>
								</ul>
							</li>
							<li class="setting-item">
								<a @click="fuzhuData = !fuzhuData" href="javascript:void(0)" class="setting-itemA">
									<i class="iconfont">&#xe673;</i>
									<span>辅助资料</span>
									<i :class="{open:fuzhuData}" class="iconfont setting-icon-btn">&#xe634;</i>
								</a>
								<ul v-show="fuzhuData">
									<li>
										<router-link to="/set/goodsClassify">
											<i class="iconfont">&nbsp;</i>
											<span>商品分类</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/goodsBrand">
											<i class="iconfont">&nbsp;</i>
											<span>商品品牌</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/basicUnit">
											<i class="iconfont">&nbsp;</i>
											<span>计量单位</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/memberGrade">
											<i class="iconfont">&nbsp;</i>
											<span>客户级别</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/basicRegion">
											<i class="iconfont">&nbsp;</i>
											<span>客户归属区域</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/goodsWarehouse">
											<i class="iconfont">&nbsp;</i>
											<span>仓库</span>
										</router-link>
									</li>
									<li>
										<router-link to="/transTemplateList">
											<i class="iconfont">&nbsp;</i>
											<span>运费模板</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/portalDocPlace">
											<i class="iconfont">&nbsp;</i>
											<span>通知分类</span>
										</router-link>
									</li>
									<li>
										<router-link to="/set/basicDDType">
											<i class="iconfont">&nbsp;</i>
											<span>业务字典</span>
										</router-link>
									</li>
								</ul>
							</li>
							<li class="setting-item">
								<a @click="xitongSet = !xitongSet" href="javascript:void(0)" class="setting-itemA" data-status="open">
									<i class="iconfont" style="">&#xe602;</i>
									<span>系统设置</span>
									<i :class="{open:xitongSet}" class="iconfont setting-icon-btn">&#xe634;</i>
								</a>
								<ul v-show="xitongSet">
									<!--<li>
										<router-link to="/system/systemCmemberSave">
											<i class="iconfont">&nbsp;</i>
											<span>网站开关</span>
										</router-link>
									</li>

									<li>
										<router-link to="/system/systemDdlistList">
											<i class="iconfont">&nbsp;</i>
											<span>系统字典设置</span>
										</router-link>
									</li>-->
									<li>
										<router-link to="/xitongchushihua">
											<i class="iconfont">&nbsp;</i>
											<span>系统初始化</span>
										</router-link>
									</li>
									<li>
										<router-link to="/xitongcanshu">
											<i class="iconfont">&nbsp;</i>
											<span>系统参数设置</span>
										</router-link>
									</li>
									<li>
										<router-link to="/goodschuli">
											<i class="iconfont">&nbsp;</i>
											<span>商品处理流程设置</span>
										</router-link>
									</li>
									<!--<li>
										<router-link to="/memberschuli">
											<i class="iconfont">&nbsp;</i>
											<span>会员处理流程设置</span>
										</router-link>
									</li>-->
									<li>
										<router-link to="/ddcllc">
											<i class="iconfont">&nbsp;</i>
											<span>订单处理流程设置</span>
										</router-link>
									</li>
									<li>
										<router-link to="/zijinchuli">
											<i class="iconfont">&nbsp;</i>
											<span>资金处理流程设置</span>
										</router-link>
									</li>
								</ul>
							</li>
							<li>
								<router-link to="/member/memberOpLogList">
									<i class="iconfont" style="">&#xe61d;</i>
									<span>操作日志</span>
								</router-link>
							</li>
						</ul>
					</li>
					<li class="fr service-parent">
						<router-link to="/zcService" class="whiteFont">
							<div>
								<i class="iconfont">&#xe61c;</i>
								<span>客服工作台</span>
							</div>
						</router-link>
					</li>
					<li class="fr service-parent">
						<a class="whiteFont" @click="quit">
							<div>
								<i class="iconfont" style="vertical-align: middle;font-size: 26px">&#xe66c;</i>
								<span>退出</span>
							</div>
						</a>
					</li>
					<li class="fr account-parent">
						<div>
							<span>{{memberOperatorViewVo.operatorName}}</span>
							<i class="iconfont">&#xec4d;</i>
						</div>
						<ul class="account">
							<li v-if="false">
								<router-link to="/zhanghaozhushou">
									<i class="iconfont">&#xe603;</i>
									<span>账号助手</span>
								</router-link>
							</li>
							<li>
								<router-link to="/accountSafety">
									<i class="iconfont">&#xe639;</i>
									<span>账号安全</span>
								</router-link>
							</li>
							<li>
								<router-link to="/service">
									<i class="iconfont">&#xe64e;</i>
									<span>服务购买</span>
								</router-link>
							</li>
							<!--<li>-->
							<!--<a @click="quit">-->
							<!--<i class="iconfont">&#xe66c;</i>-->
							<!--<span>退出</span>-->
							<!--</a>-->
							<!--</li>-->
						</ul>
					</li>
				</ul>
			</div>
			<!--end 右边按钮-->
		</nav>
		<!--end 头部通栏-->
		<!--start 头部帮助-->
		<!--end 头部帮助-->
		<!--start 提示信息-->
		<div v-show="messageBtn" @click="messageBtn=!messageBtn" class="modal-backdrop"></div>
		<transition name="fade1">
			<div v-show="messageBtn" class="header-message-warp">
				<div :class="[messageInfo]" class="message-header clearfix">
					<!--<div @click="messageInfo='yewu'" class="message-tab1 fl">-->
					<!--<span>业务消息</span>-->
					<!--<i class="message-hint">12</i>-->
					<!--</div>-->
					<div @click="messageInfo='xitong'" class="message-tab2 fl">
						<span>系统公告</span>
						<i class="message-hint" v-if="'0'!=this.$store.state.systemNotReadCount">{{this.$store.state.systemNotReadCount}}</i>
					</div>
					<div @click="messageInfo='shengji'" class="message-tab3 fl">
						<span>升级公告</span>
						<i class="message-hint" v-if="'0'!=this.$store.state.shengjiNotReadCount">{{this.$store.state.shengjiNotReadCount}}</i>
					</div>
				</div>
				<div :class="[messageInfo]" class="message-content clearfix">
					<!--<div class="message-content1 fl">-->
					<!--<ul>-->
					<!--<li>-->
					<!--<p>-->
					<!--<span style="font-size: 13px;">暂无</span><i></i>-->
					<!--</p>-->
					<!--&lt;!&ndash;<p class="message-time">2017-03-30 15:44:11</p>&ndash;&gt;-->
					<!--</li>-->
					<!--</ul>-->
					<!--</div>-->
					<div class="message-content2 fl" v-if="docListSystemList.length == 0">
						<ul>
							<li> <span style="font-size: 13px;">暂无</span><i></i></li>
						</ul>
					</div>
					<div class="message-content2 fl" v-else>
						<ul>
							<li v-for="(item,index) in docListSystemList" @click="row_goDetail(item)">
								<p class="message-text" v-if="'0'==item.ifRead">
									<i style="margin-right: 4px"></i><span style="font-size: 13px;">{{item.docListTitile}}</span>
								</p>
								<p v-if="'1'==item.ifRead">
									<i style="margin-right: 4px"></i><span style="font-size: 13px;">{{item.docListTitile}}</span>
								</p>
								<p class="message-time">{{item.createDateStr}}</p>
							</li>
						</ul>
						<div>
							<router-link to="/portalDocListListSystem" style="color: #13c19f;border: 0;font-size: 20px">更多</router-link>
						</div>
					</div>
					<div class="message-content2 fl" v-if="docListShengjiList.length == 0">
						<ul>
							<li> <span style="font-size: 13px;">暂无</span><i></i></li>
						</ul>
					</div>
					<div class="message-content3 fl" v-else>
						<ul>
							<li v-for="(item,index) in docListShengjiList" @click="row_goDetail(item)">
								<p class="message-text" v-if="'0'==item.ifRead">
									<i style="margin-right: 4px"></i><span style="font-size: 13px;">{{item.docListTitile}}</span>
								</p>
								<p v-if="'1'==item.ifRead">
									<i style="margin-right: 4px"></i><span style="font-size:13px;">{{item.docListTitile}}</span>
								</p>
								<p class="message-time">{{item.createDateStr}}</p>
							</li>
						</ul>
						<div>
							<router-link to="/portalDocListListShengJi" style="color: #13c19f;border: 0;font-size: 20px">更多</router-link>
						</div>
					</div>
				</div>
			</div>
		</transition>
		<transition name="slide">
			<div v-show="messageBtn" class="message-footer">
				<a href="javascript:void(0)">更多</a>
			</div>
		</transition>
		<!--end 提示信息-->
	</header>
	<!--end 头部-->
</template>

<script>
	export default {
		mounted() {
			this.axios({
				method: 'GET',
				url: "/v3/member/operators"
			}).then((res) => {
				this.memberOperatorViewVo = res.data;
				this.zhichiFun(res.data);
			}).catch((err) => {
				this.Public.openError(this, err.response.data)
			});
		},

		data() {
			return {
				headerFoldBtn: true,
				jichuData: false,
				fuzhuData: false,
				xitongSet: false,
				messageBtn: false,
				messageInfo: 'xitong',
				memberOperatorViewVo: {},
				/* 系统公告数据 */
				docListSystemList: [],
				/* 升级公告数据 */
				docListShengjiList: [],
				/* 未读系统公告数量 */
				systemNotReadCount: '',
				/* 未读升级公告数量*/
				shengjiNotReadCount: '',
				/* 未读公告总数量*/
				notReadSumCount: '',
			}
		},
		methods: {
			headFoldBtn() {
				this.headerFoldBtn = !this.headerFoldBtn;
				this.$store.commit('newHeadFold', this.headerFoldBtn);
			},
			//查询未读公告总数量
			queryNotReadCount() {
				this.axios({
					method: 'post',
					url: "/v3/portal/docLists/queryNotReadCount",
					data: {}
				}).then((res) => {
					this.notReadSumCount = res.data.sumInfo.notReadCount;
					this.$store.commit('notReadSumCount', this.notReadSumCount);
				});
			},
			//查询前5条公告记录
			queryPortalDocListListAll() {
				this.messageBtn = !this.messageBtn;
				this.axios({
					method: 'post',
					url: "/v3/portal/docLists/listAll",
					data: {
						docPlaceCode: '12300000002'
					}
				}).then((res) => {
					this.docListSystemList = res.data.list;
					this.systemNotReadCount = res.data.sumInfo.notReadCount;
					this.$store.commit('systemNotReadCount', this.systemNotReadCount);
				});

				this.axios({
					method: 'post',
					url: "/v3/portal/docLists/listAll",
					data: {
						docPlaceCode: '12300000003'
					}
				}).then((res) => {
					this.docListShengjiList = res.data.list;
					this.shengjiNotReadCount = res.data.sumInfo.notReadCount;
					this.$store.commit('shengjiNotReadCount', this.shengjiNotReadCount);
				});
			},

			query_portalDocListData() { //请求数据
				this.axios({
					method: "GET",
					url: "/v3/portal/docLists/" + localStorage.getItem('docListCode') + "/queryDataAddMessage"
				}).then((res) => {
					this.vue_portalDocListData = res.data;
				}).catch((err) => {

				})
			},

			//查看公告详情
			row_goDetail(data) {
				this.$store.commit('newDocListCode', data.docListCode);
				this.$store.commit('newDocPlaceCode', data.docPlaceCode);
				this.$router.push({
					path: "/portalDocListDetail1"
				});
				this.queryPortalDocListListAll();
			},

			quit() {
				this.$confirm('确认退出？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "POST",
						url: "/v3/member/logout"
					}).then((res) => {
						this.$router.push({
							path: "/login"
						})
					}).catch((err) => {
						this.Public.openError(this, err.response.data)
					})
				}).catch(() => {
					//点击取消的回调
				});
			},
			/**
			 * 智齿客服初始化方法
			 */
			zhichiFun(memberOperatorData) {
				/*1.组件初始化*/
				/*
				 * 初始化智齿咨询组件实例
				 */
				var zhiManager = (getzhiSDKInstance());
				zhiManager.on("load", function(ret) {
					zhiManager.initBtnDOM();
				});
				/*2.自定义外观*/
				/*
				 * 设置咨询入口按钮&聊天窗体颜色  格式为 0-9 a-f 之间的六位有效字符 不用加#
				 */
				zhiManager.set('color', '03B8CC');

				/*
				 * 设置咨询入口提示文案 建议长度为 8 个字符之内，文案仅对 PC组件有效，移动端没有文案
				 */
				zhiManager.set('title', '联系平台');

				/*
				 * 设置咨询入口位置
				 * 若传入 1 ，按钮将显示在右下角 默认显示在右下角
				 * 若传入 2 ，按钮将显示在左下角
				 */
				zhiManager.set('location', 1);

				/*
				 *设置水平边距，默认水平为 20 像素
				 */
				zhiManager.set('horizontal', 20);

				/*
				 *设置垂直边距，默认垂直为 40 像素
				 */
				zhiManager.set('vertical', 40);

				/*
				 * 设置聊天悬浮窗口大小
				 * 最小宽度360像素，最大宽度640像素，默认360像素
				 * 最小高度430像素，最大高度720像素，默认540像素
				 *
				 */

				zhiManager.set('size', {
					'width': 360,
					'height': 540
				});

				/*
				 * 隐藏聊天窗体底部的智齿科技冠名
				 * 设置为true ||不设置 则显示
				 * 设置为 false 则不显示
				 */
				zhiManager.set('powered', false);

				/*
				 * 自定义咨询入口
				 * true自定义咨询按钮废弃系统默认按钮
				 * 当为左下时，则水平距离左边100px。当为右下时，则水平距离右边100px
				 */
				zhiManager.set('customBtn', 'true');
				zhiManager.set('customMargin', 20);

				/*
				 * 获取未读消息 打开聊天窗口
				 */
				zhiManager.on("receivemessage", function(ret) {
					zhiManager.expand();
				});

				/*3.设置页面语言*/
				zhiManager.set('lan', 'cn'); //en 支持英文  cn 支持中文  默认中文

				/*4.对接用户身份和资料*/
				/*
				 * 对接用户身份、预留字段、自定义字段
				 * 企业可通过API对接用户资料，此接口为老版接口，
				 * 不推荐使用，但如果已经使用，仍然可以兼容。
				 * 通过在 userinfo 标签内可添加所有预留资料字段的值，
				 * 或可通过 params 参数添加自定义字段，
				 * 如：params: {"等级":"VIP用户","客户状态":"意向客户"}。
				 */
				zhiManager.set('userinfo', {
					partnerId: memberOperatorData.cmemberCode, //用户对接ID，必填，用户唯一标示，通常是企业自有用户系统中的userId
					tel: memberOperatorData.operatorPhone, //电话或手机
					email: memberOperatorData.operatorEmail, //邮箱
					uname: memberOperatorData.memberName, //昵称
					qq: memberOperatorData.operatorQq, //qq
					realname: memberOperatorData.operatorName, //真实姓名
					remark: '' //用户的备注信息
				});
				/*
				 * 对接用户身份、预留字段、自定义字段
				 * 企业可通过API对接用户资料。
				 * 通过在customerFields标签内可添加所有预留资料字段的值，
				 * 这些预留字段需要在管理后台-客户中心中根据企业需求进行添加，
				 * 然后再根据新添加的字段名称将相应的值传入。
				 */
				var extObj = {
					"weibo": "", //微博
					"weixin": memberOperatorData.operatorWechat, //微信
					"userSex": memberOperatorData.operatorSex, //性别
					"birthday": "" //生日
				};
				extObj = JSON.stringify(extObj);
				zhiManager.set("customerFields", extObj);

				/*5.调整接待方式*/
				/*
				 * 1 : 仅机器人客服模式
				 * 2 : 仅人工客服模式
				 * 3 : 机器人客服优先模式
				 * 4 : 人工客服优先模式
				 */
				zhiManager.set('moduleType', 3)

				/*
				 * 设置指定机器人接待
				 * 企业可通过此API实现在特定场景下，对特定用户群体以特定的机器人接待。
				 * 典型的场景是企业在一个智齿账户下购买了多套机器人，分别负责企业旗下不同网站用户的咨询接待。
				 * 指定机器人接待，机器人id
				 */
				//zhiManager.set('robotFlag','xxxxxxxxxxxxx');

				/*设置指定客服组接待
				 *企业可通过此API实现在特定场景下，特定用户群体从特定入口发起咨询时分配到指定客服组接待。
				 * 典型的场景是“售前咨询”分配到售前组，“售后咨询”分配到售后组。
				 * 值得关注的是，此功能通常与设置客服接待模式配合使用。
				 * 指定客服组接待，客服组id
				 */
				//zhiManager.set('groupId','xxxxxxxxxxxxx');

				/*
				 * 设置指定客服接待
				 * 企业可通过此API实现在特定场景下，对特定用户群体以特定的客服模式接待。
				 * 典型的场景是“售前咨询”以人工优先模式，“售后咨询”以机器人优先模式。
				 * 指定客服接待，客服id
				 */
				//zhiManager.set('aid','xxxxxxxxxxxxx');

				/*
				 * 设置遇未知问题时显示转人工按钮
				 * 通过此API，企业可默认不显示转人工按钮，需要用户咨询机器人并出现机器人未知回答后才显示转人工按钮。
				 * 典型的场景是企业希望尽量降低用户转人工咨询的数量，最大化机器人的接待效能。
				 * 当然，开启此功能后对企业的知识库完善程度和机器人欢迎语引导能力提出了较高要求。
				 * 若开启该功能 则转人工按钮默认为隐藏
				 * true 遇未知问题显示转人工服务
				 * false 走默认流程 视客服接待模式而定
				 */
				//zhiManager.set('artificial',true);

				/*6.支持邀请用户*/
				/*
				 * 设置自动邀请
				 * 开启自动邀请后，当用户浏览配置了智齿网页组件的网站时会弹出一个邀请用户进行访问咨询的一个功能。
				 * 企业可配置用户在打开网页后，停留x秒弹出邀请窗，
				 * 用户拒绝邀请后间隔x秒再次弹出，
				 * 单个页面一日自动邀请x次。
				 * 设置方法如下：
				 */
				zhiManager.set('invite', 0); // 是否开启自动邀请  1||不写 开启   0 关闭
				zhiManager.set('tipTitle', '欢迎咨询'); //主动邀请文案
				zhiManager.set('submitBtnTitle', '接受'); //接受
				zhiManager.set('firstTimeout', 10); // 第一次加载延迟邀请时间
				zhiManager.set('overTimeout', 60); //拒绝后再次邀请时间
				zhiManager.set('inviteCount', 5); //一天之内共邀请多少次

				/*
				 * 设置自动强制发起会话
				 * 企业可以通过在关键页面开启自动强制发起会话功能，
				 * 当用户进入该页面后，会话窗口会自动展开并完成初始化。
				 * true 自动打开,默认不开启
				 */
				zhiManager.set('autoExpand', false);

				/*
				 * 允许客服主动邀请用户
				 * 企业需要添加此API或在“管理后台-设置-支持渠道-桌面网站”中开启“主动邀请用户”功能，
				 * 客服在工作台才能手动邀请浏览网站中的用户。
				 * 企业可根据自己的需要，在部分关键页面开启此项功能，
				 * 以避免所有网站访客都进入邀请列表导致客服的工作难度增大。
				 * true 自动打开,默认不开启
				 */
				zhiManager.set('isInviteFlag', false);

				/*7.采集用户浏览轨迹*/

				/*8.调整留言设置*/
				/*
				 * 设置留言时是否填写手机号码
				 * 是否显示手机号码
				 * true 显示手机号码填写框
				 * false 不显示  默认为不显示
				 */
				zhiManager.set('telShowFlag', true);

				/*
				 * 手机号码是否必填
				 * true 手机号码填写框为必填项
				 * false 手机号码填写框为选填项 默认为选填
				 */
				zhiManager.set('telFlag', true);

				/*
				 * 关闭系统提示的留言引导和会话结束后的留言入口
				 * false 开启留言功能，默认开启
				 * true 不开启留言功能
				 */
				zhiManager.set('msgflag', false);

				/*
				 * 关闭输入框菜单区域的留言按钮
				 * true 开启留言功能，默认开启
				 * false 不开启留言功能
				 */
				zhiManager.set('isMessageFlag', true);

				/*9.调整满意度设置*/
				/*
				 * 控制用户关闭聊天窗口时是否提示评价
				 * true 开启评价引导，默认开启
				 * false 关闭评价引导
				 */
				zhiManager.set('satDegree_A', true);

				/*
				 * 关闭主动评价菜单
				 * true 开启主动评价菜单，默认开启，后台可按渠道设置开关
				 * false 关闭满意度功能
				 */
				zhiManager.set('isFeedBackFlag', false);

				/*10.其它*/
				/*
				 * 控制显示历史聊天记录的时间范围
				 *  time 显示历史聊天记录的时间范围，需传入分钟数，有效值10-2880（10分钟-48小时）
				 */
				zhiManager.set('time', 1440);

				/*
				 * 新窗口打开咨询页
				 * true 新窗口打开咨询页
				 * false 打开悬浮窗咨询页（默认值）
				 */
				zhiManager.set('anchor', false);
			},

		},
		created() {
			this.queryNotReadCount();
		}
	}
</script>

<style scoped>
	@import 'header.css';
	.whiteFont {
		color: white;
	}
	
	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}
	
	.fade-enter,
	.fade-leave-active {
		width: 0;
		opacity: 0;
		margin: 0;
	}
	
	.fade1-enter-active,
	.fade1-leave-active {
		transition: .4s;
	}
	
	.fade1-enter,
	.fade1-leave-active {
		opacity: 0;
		transform: translateX(100px);
		/*transform: scaleY(0);*/
	}
	
	.slide-enter-active,
	.slide-leave-active {
		transition: all .4s;
	}
	
	.slide-enter,
	.slide-leave-active {
		height: 0;
	}
</style>